<template>
  <el-aside width="200px" class="el-aside">
    <div class="cateList">
      <div
        class="cateItem"
        v-for="item in cateList"
        :key="item.id"
        :class="{ active: isActive == item.id }"
        @click="cateItemHandle(item.id)"
      >
        <span>{{ item.name }}</span>
        <em>
          <el-button
            type="primary"
            text
            class="el-button"
            @click="$emit('edit', item)"
          >
            <el-icon>
              <Edit />
            </el-icon>
          </el-button>
          <el-button
            type="primary"
            text
            class="el-button"
            @click="$emit('del', item)"
          >
            <el-icon>
              <Close />
            </el-icon>
          </el-button>
        </em>
      </div>
    </div>
    <div class="page">
      <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :size="'small'"
        :background="background"
        layout=" prev,  next"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </el-aside>
</template>

<script setup>
import { ref } from "vue";
import { getPicsCate } from "@/api/pics.js";
const cateList = ref([]);
// 定义总条数
const total = ref(0);
// 定义显示的页码
const currentPage = ref(1);
// 定义每页显示的条数
const pageSize = ref(10);
// 定义默认激活状态
const isActive = ref(0);
const background = ref("background");
const small = ref("small");
// 定义获取数据方法
const getPicsCateData = async () => {
  const res = await getPicsCate(currentPage.value, pageSize.value);
  if (res.msg && res.msg !== "ok") {
    return;
  }
  cateList.value = res.data.list;
  console.log(cateList.value,"hhh");
  total.value = res.data.totalCount;

  // 将第一条数据设置为默认选中状态
  const item = cateList.value[0];
  if (item) {
    isActive.value = item.id;
    emit("change", item.id);
  }
};
getPicsCateData();

//修改显示条数
const handleSizeChange = (val) => {
  pageSize.value = val;
  getPicsCateData();
};
//修改分页页码
const handleCurrentChange = (val) => {
  currentPage.value = val;
  getPicsCateData();
};
const emit = defineEmits("change");
// 图库分类点击发送图库id
const cateItemHandle = (id) => {
  isActive.value = id;
  emit("change", id);
};
defineExpose({
  getPicsCateData,
});
</script>

<style lang="less" scoped>
.el-aside {
  height: 100%;
  border-right: 1px solid #dbdbdb;
  position: relative;
  .cateList {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 50px;
    overflow-y: auto;
    .cateItem {
      display: flex;
      height: 43px;
      align-items: center;
      cursor: pointer;
      em {
        margin-left: auto;
        .el-button {
          margin: 0px;
          width: 30px;
        }
        padding-left: 5px;
      }
      span {
        padding-left: 10px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        width: 100px;
      }
    }
    .cateItem:hover {
      background: #f3f3f3;
    }
    .active {
      background: #f3f3f3;
    }
  }
  .page {
    position: absolute;
    right: 0;
    left: 0;
    bottom: 0;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
}

</style>
